<template>
	<view>
		<u-navbar :border-bottom="false" title="添加收货地址	" title-size="32" title-width="500">
		</u-navbar>
		<view class="container">
			<view class="header boxS">
				<view class="h-item">
					<view>收货人</view>
					<view class="color3">
						<input type="text" placeholder="请输入收货人姓名" v-model="name" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="h-item">
					<view>手机号</view>
					<view class="color3" @click="keyDown = true">
						<input type="number" placeholder="请输入收货人手机号" disabled="true" @input="input" placeholder-class="placeholder" v-model="tel"
						 maxlength="11" />
					</view>
				</view>
			</view>
			<view class="header boxS" style="margin-top: 23rpx;">
				<view class="h-item">
					<view>所在地区</view>
					<view class="color3" @click="showdz = true" style="padding-right: 34rpx;position: relative;display: flex;align-items: center;">
						<text class="placeholder" v-show="!taddress.city">请选择省.市.区</text>
						<text style="color: #333333;" v-show="taddress.city">{{addList.province + addList.city  + addList.area}}</text>
					</view>
				</view>
				<view class="h-item color3" style="height: 149rpx;margin-top: 37rpx;">
					<textarea style="height: 100%;width: 100%;" placeholder="请输入街道" placeholder-class="placeholder" v-model="address"></textarea>
				</view>
			</view>
			<view class="header boxS" style="margin-top: 20rpx;">
				<view class="h-item" style="justify-content: initial;">
					<view>地址标签</view>
					<view class="color3" style="display: flex;text-align: left;" v-for="(item,index) in tabList" :key="item.id" @click="tab(item.id)">
						<view class="attr1" :class="{'active': active === item.id}">{{item.name}}</view>
					</view>
				</view>
				<view class="h-item">
					<view>设为默认地址</view>
					<view class="color3">
						<u-switch :active-value="1" :inactive-value="0" size="38" v-model="checked" active-color="#41CB05" @change="change"></u-switch>
					</view>
				</view>
			</view>
			<Taddress :title="'地址'" :showdz="showdz" @confirmdz="confirmdz" @close="close"></Taddress>
			<view class="baoBtn" @click="addAddress">保存</view>
		</view>
		<u-keyboard ref="uKeyboard" mode="number" v-model="keyDown" @change="valChange" @backspace="backspace" :safe-area-inset-bottom="true"></u-keyboard>
	</view>

</template>

<script>
	import Taddress from '@/components/threeAddress.vue'
	export default {
		components: {
			Taddress,
		},
		data() {
			return {
				keyDown: false,
				active: '0',
				address: '', //街道
				tabList: [{
						name: '家',
						id: '1',
					},
					{
						name: '公司',
						id: '2'
					}
				],

				checked: false,
				showdz: false,
				taddress: {
					area: '',
					city: '',
					province: ''
				},
				name: '',
				tel: '',
				tabs: 0,
				checkedValue: 0,
				addList: {
					area: '',
					city: '',
					province: ''
				},
			}
		},
		created() {
			this.tab()
			this.name = uni.getStorageSync('Ztc_C_USER_INFO').trueName
			this.tel = uni.getStorageSync('Ztc_C_USER_INFO').mobile
		},
		methods: {
			valChange(val) {
				console.log(val)
				// 将每次按键的值拼接到value变量中，注意+=写法
				if(this.tel.length>=11) return false
				this.tel += val;
				if (this.tel.trim().length !== 11) return false
				// console.log(this.mobile)
				if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.tel))) {
					this.$u.toast('请输入正确的手机号')
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.tel.length) this.tel = this.tel.substr(0, this.tel.length - 1);
			},
			input() {
				this.keyDown = true
				if (this.tel.trim().length !== 11) return false
				// console.log(this.mobile)
				if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.tel))) {
					this.$u.toast('请输入正确的手机号')
				}
			},
			change(status) {
				// console.log(status)
				this.checkedValue = status
				console.log(status)
			},
			tab(id) {
				// 单选
				if (id !== this.active) {
					this.active = id
				} else {
					this.active = -1
					id = 0
				}
				console.log(id)
				this.tabs = id
			},
			//新增
			async addAddress() {
				if (this.name === '') {
					this.$u.toast('请输入收货人')
					return false
				} else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.tel))) {
					this.$u.toast('请输入正确手机号')
					return false
				} else if (this.taddress.province === '') {
					this.$u.toast('请输入收获地址')
					return false
				} else if (this.address === '') {
					this.$u.toast('请输入街道')
					return false
				}
				try {
					let data = {
						'name': this.name,
						'mobile': this.tel,
						'province': this.taddress.province,
						'city': this.taddress.city,
						'district': this.taddress.area,
						'address': this.address,
						'address_label': this.tabs,
						'isdefault': this.checkedValue,
						'app_type': 1
					}
					const res = await this.$api.common.addAddressList(data)
					console.log(res)
					if (res.code === 200) {
						this.$u.toast('新增成功')
						setTimeout(res => {
							uni.$emit('addressChange', true)
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}


				} catch (e) {
					console.log(e)
				}
			},
			confirmdz(e) {
				console.log(e)
				this.addList.area = e.area.label //区
				this.addList.city = e.city.label //市
				this.addList.province = e.province.label //省
				this.taddress.area = Number(e.area.value) //区
				this.taddress.city = e.city.id //市
				this.taddress.province = e.province.id //省
				this.showdz = false
			},
			close() {
				this.showdz = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeholder {
		color: rgb(210, 210, 210);
		font-size: 30rpx;
	}

	.container {
		min-height: 100vh;
		font-family: PingFang SC;
		background-color: #f6f6f6;
		padding-bottom: 220rpx;
		padding-top: 23rpx;

		.boxS {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
			border-radius: 10rpx;
			width: 702rpx;
			padding: 0 16rpx;
			margin: 0 auto;
		}

		.positions {
			position: absolute;
			top: 88rpx;
			left: 24rpx;
		}


		.text-line {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.text-line2 {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.input-placeholder {
			text-align: right;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #989898;
		}

		input {
			text-align: right;
		}

		.color3 {
			color: #333333;
		}

		.header {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			.h-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;
			}
		}

		.attr-active {
			width: 140rpx;
			height: 50rpx;
			background: linear-gradient(-90deg, #FDD421, #FFE23E);
			border-radius: 25rpx;

		}

		.attr1 {
			width: 140rpx;
			height: 50rpx;
			display: flex;
			margin-left: 40rpx;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #D0D0D0;
			border-radius: 25rpx;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #656565;
		}

		.swis {
			width: 63rpx;
			height: 38rpx;
		}

		.baoBtn {
			width: 690rpx;
			height: 88rpx;
			background: linear-gradient(-90deg, #FDD421, #FFE23E);
			border-radius: 44rpx;
			margin: 0 auto;
			line-height: 88rpx;
			text-align: center;
			margin-top: 61rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.active {
		background: linear-gradient(-90deg, #FDD421, #FFE23E);
		border: 0 !important;
	}
</style>
